<template>
	<view class="menu-box left clearfix">
		<view class="menu-breadcrumb left clearfix">
			<uni-breadcrumb separator="/" style="width:300px;float:left;">
			  <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
			    {{route.name}}
			  </uni-breadcrumb-item>
			</uni-breadcrumb>
			<!--搜索-->
			<view class="menu-so right clearfix">
				<label class="left">
					<input placeholder="请输入手机号/姓名/邮箱查找" v-model="keyword" style="width:250px;font-size:13px;height:30px;line-height:30px;padding-left:5px;" />
				</label>
				<label class="right" style="margin-right:10px;" @click="submitSearch()">
					<uni-icons type="search" size="25" color="#999"></uni-icons>
				</label>
			</view>
		</view>
		
		<view class="menu-content left clearfix">
			<uni-table border stripe emptyText="暂无更多数据" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" width="100">姓名/昵称</uni-th>
					<uni-th align="center" width="200">手机号</uni-th>
					<uni-th align="center">内容</uni-th>
					<uni-th align="center" width="150">提交时间</uni-th>
					<uni-th align="center" width="100">操作</uni-th>
					
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item,index) in data">
					<uni-td align="center" width="100" v-if="item.name">
						{{item.name.slice(0,5)}}
					</uni-td>
					<uni-td align="center" width="100" v-else>
						--
					</uni-td>
					<uni-td align="center">{{item.mobile||'--'}}</uni-td>
					<uni-td align="left">{{item.content||'--'}}</uni-td>
					<uni-td align="center" v-if="item.create_date"><uni-dateformat :date="item.create_date" format="yyyy-MM-dd hh:mm"></uni-dateformat></uni-td>
					<uni-td align="center">
					<button size="mini" class="list-button" @click="defrost(item,index)" v-if="item.is_disabled == true" style="background:#00c296;">解冻</button>
					<button size="mini" class="list-button" @click="remove(item,index)">删除</button></uni-td>
				</uni-tr>
				
			
			</uni-table>
			
			<view class="list-page left clearfix">
				<uni-pagination :current="currentPage" :page-size="20" :total="total" title="标题文字" @change="changePage" />
			</view>
			
		
	</view>
	
	</view>
</template>
<style>
	.uni-select[data-v-ddf9e0a2] {
	    font-size: 14px;
	    border: 1px solid #e5e5e5;
	    box-sizing: border-box;
	    border-radius: 4px;
	    padding: 0 5px;
	    padding-left: 10px;
	    position: relative;
	    display: flex
	;
	    -webkit-user-select: none;
	    user-select: none;
	    flex-direction: row;
	    align-items: center;
	    border-bottom: solid 1px #e5e5e5;
	    width: 100%;
	    flex: 1;
	    height: 45px !important;
	}
</style>
<style scoped lang="scss">
	.menu-so label{line-height:30px;}
	.menu-so{width:300px;height:30px;border:1px solid #eee;margin-top:10px;margin-right:30px;border-radius: 5px;}
	.sh-form-button{width:60%;height:40px;background:#2979ff;line-height:40px;text-align:center;color:#fff;border-radius: 5px;margin-left:20%;margin-top:2rem;font-size:14px;cursor:pointer;}
	.sh-form-input{width:100%;}
	.sh-order-no{font-size:14px;font-weight:400;}
	.sh-content{width:90%;margin-left:5%;height:300px;margin-top:20px;}
	.list-button{width:65px;height:30px;font-size:12px;margin-left:5px;}
	.po-buttom-box{width:60%;height:40px;margin-top:70px;background:#2979ff;line-height:40px;text-align: center;border-radius: 5px;margin-left:20%;color:#fff;cursor:pointer;}
	.order-buttom-price label{margin-left:5px;margin-right:5px;}
	.order-buttom-price{line-height:35px;font-size:14px;}
	.order-buttom-goods-number{width:100px;line-height:35px;font-size:14px;margin-left:30px;}
	.order-buttom-box{width:100%;height:35px;}
	.order-userinfo-content text label{float:left;margin-right:5px;}
	.order-userinfo-content text{float:left;width:calc(100% - 30px);margin-left:10px;line-height:30px;font-size:14px;overflow-wrap: break-word;}
	.order-userinfo-content{width:100%;min-height:70px;padding-bottom:20px;}
	.order-userinfo{width:100%;min-height:100px;background:#f5f5f5;margin-top:10px;}
	.order-goods-right-price{width:70px;line-height:80px;text-align: center;height:80px;color:#ff5000;}
	.order-goods-right-number{width:75px;line-height:80px;color:#999;font-size:14px;}
	.order-goods-text-right{width:150px;height:80px;}
	.order-goods-text-left text{float:left;width:100%;line-height:25px;}
	.order-goods-text-left{width:450px;height:80px;line-height:80px;font-size:14px;color:#333;}
	.order-goods-text{width:calc(100% - 100px);height:80px;margin-top:5px;}
	.order-goods-image{width:80px;height:80px;margin:5px;border-radius: 5px;overflow: hidden;margin-left:10px;}
	.order-goods-list{width:100%;height:90px;margin-bottom:10px;}
	.order-title-right{margin-right:20px;line-height:25px;}
	.order-titles{width:calc(100% - 10px);height:30px;font-size:13px;margin:10px;margin-bottom:0px;}
	.order-goodss{width:100%;min-height:120px;background:#f5f5f5;margin-top:10px;border-radius: 3px;}
	.order-create-date{line-height:35px;font-size:14px;color:#999;margin-right:20px;}
	.order-number{width:250px;height:35px;line-height:35px;margin-left:20px;font-size:14px;color:#666;}
	.order-no{width:100%;height:35px;background:#f5f5f5;border-radius: 3px;}
	.op-submit{width:70%;margin-left:15%;height:35px;line-height:35px;font-size:14px;margin-top:20px;}
	.op-content{width:90%;margin-left:5%;margin-top:20px;float:left;height:700px;overflow:auto;}
	.op-close{width:30px;height:30px;position:absolute;right:0px;top:0;cursor:pointer;}
	.op-title{float:left;width:calc(100% - 20px);line-height:30px;padding-left:20px;margin-top:5px;font-size:15px;font-weight:bold;position: relative;}
	.op-box{width:800px;height:800px;background:#fff;border-radius: 10px;}
	.list-page{width:100%;height:50px;line-height:50px;text-align:center;margin-top:30px;}
	.order-text text{float:left;width:100%;font-size:13px;text-align: left;}
	.order-text{width:240px;height:50px;margin-top:5px;margin-bottom:5px;margin-left:10px;}
	.order-image{width:50px;height:50px;margin-top:5px;margin-bottom:5px;border-radius: 3px;overflow: hidden;}
	.list-button{margin-left:10px;background:#2979ff;color:#fff;}
	.order-goods{width:300px;min-height:50px;margin-left:5px;border-radius: 3px;overflow: hidden;cursor:pointer;}
	.menu-table-content{min-width:1600px;}
	.uni-forms-item__label{width:60px !important;}
	.form-quxiao-submit{width:80px;line-height:35px;height:35px;color:#666;border-radius: 5px;text-align: center;border:1px solid #ccc;margin-right:20px;cursor:pointer;font-size:14px;}
	.form-submit{width:80px;line-height:35px;height:35px;background:#2979ff;color:#fff;border-radius: 5px;text-align: center;margin-right:20px;cursor:pointer;font-size:14px;}
	.add-content{width:80%;margin-left:10%;margin-top:40px;}
	.add-title label:last-child{float:right;line-height:40px;height:40px;margin-right:20px;font-size:14px;color:#333;}
	.add-title label:first-child{float:left;line-height:40px;height:40px;margin-left:20px;font-size:14px;color:#333;font-weight:500;}
	.add-title{width:100%;line-height:40px;height:40px;border-bottom:1px solid #eee;}
	.add-box{width:600px;height:500px;background:#fff;border-radius: 12px;}
	.menu-title label{float:left;margin-right:5px;}
	.menu-title{width:calc(100% - 500px);height:45px;border-right:1px solid #eee;line-height:45px;text-align:center;font-size:15px;}
	.menu-sort{width:100px;height:45px;line-height:45px;text-align:center;font-size:14px;border-right:1px solid #eee;}
	.menu-tr:hover{background:#f8f8f8;}
	.menu-tr{width:100%;height:45px;border-bottom:1px solid #eee;}
	.menu-table{width:100%;border:1px solid #eee;border-bottom:none;}
</style>

<script>
	var db = uniCloud.database();
	import common from '/static/js/common.js'
	var global = uniCloud.importObject('global',{customUI:true});
	export default {
		name:"system-menu",
		data() {
			return {
				keyword:'',
				
				total:10,
				data:[],
				shipmentOrder:{},
				currentOrder:{},
				routes: [
				        {
				          to: "/A",
				          name: "意见反馈",
				        },
				        {
				          to: "/B",
				          name: "意见反馈",
				        }
				      ]
			};
		},
		mounted() {
			var that = this;
			this.getData();
		},
		props:['currentPage'],
		methods:{
			
			//删除
			remove(item,index){
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: function (res) {
						if (res.confirm) {
							db.collection('opinion').doc(item._id).remove().then(res=>{
								uni.showToast({
									title:'已删除'
								})
								that.data.splice(index,1);
							});
						}
					}
				});
			},
			
			
			//搜索
			submitSearch(){
				this.getData();
			},
			
			//切换分页后
			changePage(e){
				var page = e.current;
				uni.navigateTo({
					url:'/pages/index/index?page=userinfo-disable&p='+page
				})
			},
			
			getData(){
				var page = this.currentPage;
				var keyword = this.keyword;
				if(!page || page < 1){
					page = 1;
				}
				uni.showLoading({
					title:'加载中'
				})
				var where = {}
				if(keyword){
					 page = 1;
					// 使用数据库的模糊查询语法，%表示任意字符
					where = {
					    $or: [
					        { 'tel': { $regex: keyword, $options: 'i' } },
							 { 'name': { $regex: keyword, $options: 'i' } }
					    ]
					};
					
				}
				var skip = (page - 1) * 20;
				db.collection('opinion').orderBy('create_date desc').where(where).skip(skip).limit(20).get({getCount:true}).then(res=>{
					uni.hideLoading();
					this.data = res.result.data;
					this.total = res.result.count;
				}).catch(err=>{
					uni.hideLoading();
				});
			}
		}
	}
</script>
